﻿<template>
  <!-- ws的弹窗 -->
  <el-dialog v-drag :title = 'exportTitle' :visible.sync = 'visibleDialog' width = '50%' :show-close = 'false'
  :close-on-press-escape = 'false' :close-on-click-modal = 'false' append-to-body>
    <el-form label-position = 'left' v-loading = 'progressLoading' :element-loading-text = 'progressLoadingText' element-loading-spinner = "el-icon-loading"
    label-width = '146px'>
      <el-form-item label = '请选择需要导出文件：'>
        <el-select v-model = 'exportArray' placeholder = '请选择需要导出文件' multiple>
          <el-option v-for = 'item in exportSelectOption' :key = 'item.value' :value = 'item.value' :label = 'item.label'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = 'info' @click = "resetForm">取 消</el-button>
        <el-button type = "primary" @click = "submitForm">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  // 需要三个参数
  // 1、exportDialog-弹窗打开或关闭的变量
  // 2、exportTitle-本次导出的主题
  // 3、exportApiRouter-本次导出的地址
  props: ['exportDialog', 'exportTitle', 'exportApiRouter', 'type', 'selectOption'],
  data () {
    return {
      visibleDialog: false,
      // 导出时的loading显示
      progressLoadingText: '文件导出中...',
      progressLoading: false,
      // 导出相关
      exportArray: [],
      exportSelectOption: []
    }
  },
  methods: {
    // 初始化页面信息
    initComponent () {
      // 初始化导出相关的信息
      this.exportArray = []
      this.exportSelectOption = []
      if (this.selectOption.length) {
        this.selectOption.forEach(item => {
          let obj = {
            value: '',
            label: ''
          }
          if (this.type === 'dynamicPage') {
            obj.value = item.uid
            obj.label = item.name
          } else if (this.type === 'dynamicEvents') {
            obj.value = item.no
            obj.label = item.name
          }
          this.$set(this.exportSelectOption, this.exportSelectOption.length, obj)
        })
      }
      // 类型为progressBar时的信息
      this.progressLoading = false
    },
    // 关闭导出的弹窗时
    resetForm () {
      this.$confirm('确定要放弃' + this.exportTitle + '的操作么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        this.$emit('closeExportOperation')
      }).catch(() => {})
    },
    // 上传文件的方法
    submitForm () {
      if (!this.exportArray.length) {
        this.$message({
          message: '请选择需要导出的内容',
          type: 'warning',
          duration: 5000
        })
        return
      }
      this.progressLoading = true
      let requestParams = {}
      if (this.type === 'dynamicPage') {
        requestParams['ids'] = this.exportArray.join(',')
      } else if (this.type === 'dynamicEvents') {
        requestParams['nos'] = this.exportArray.join(',')
      }
      this.$patch(this.exportApiRouter, requestParams).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          let content = decodeURIComponent(dataResult.file)
          let blobContent = this.toBlob(content, dataResult.filetype)
          this.downloadblob(blobContent, dataResult.filename)
          this.progressLoading = false
          this.$message({
            message: '导出成功',
            type: 'success',
            duration: 3000
          })
          this.$emit('closeExportOperation')
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'error',
            duration: 5000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 导出相关的方法
    downloadblob (blobcontent, filename) {
      if ('msSaveOrOpenBlob' in navigator) {
        // Microsoft Edge and Microsoft Internet Explorer 10-11
        window.navigator.msSaveOrOpenBlob(blobcontent, filename)
      } else {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a')
        eleLink.download = filename
        eleLink.style.display = 'none'
        // 字符内容转变成blob地址
        eleLink.href = URL.createObjectURL(blobcontent)
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      }
    },
    // 将base64装为文件
    toBlob (base64str, filetype) {
      let bytes = window.atob(base64str)
      let n = bytes.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bytes.charCodeAt(n)
      }
      return new Blob([u8arr], {type: filetype})
    }
  },
  watch: {
    exportDialog: {
      handler: function (val, oldVla) {
        this.visibleDialog = val
        if (val) {
          this.initComponent()
        }
      }
    }
  }
}
</script>
